import React from 'react'

import styles from './index.module.scss';

import avater from '../../assets/logo192.png'

import bj from './img/bj.jpg'

import { Button, Space, List } from 'antd-mobile'
import { FillinOutline, StarOutline, ReceiptOutline, ClockCircleOutline, BankcardOutline, UserContactOutline, PhonebookOutline } from 'antd-mobile-icons'

export default function My() {
  return (
    <div className={styles.MyBox}>
      {/* 头部背景 */}
      <div className={styles.head_bjimg}>
        <img src={bj} alt="" />
      </div>
      {/* 登录的信息部分 */}
      <div className={styles.login_info}>
        {/* 头像 */}
        <div className={styles.avater}>
          <img src={avater} alt="" />
        </div>
        {/* 登录名字 */}
        <div className={styles.username}>管理员</div>
        {/* 退出登录 */}
        <div className={styles.logout}>
          <Button size='middle' color='primary'>
            退出登录
          </Button>
        </div>
        {/* 编写个人资料 */}
        <div className={styles.change_user_info}>
          <Button color='primary' fill='none'>
            <Space>
              <span>编辑个人信息</span>
              <FillinOutline />
            </Space>
          </Button>
        </div>
      </div>
      {/* 其他功能 */}
      <div className={styles.order_list}>
        <List header='其他功能'>
          <List.Item prefix={<StarOutline />} onClick={() => { }}>
            收藏
          </List.Item>
          
          <List.Item prefix={<ReceiptOutline />} onClick={() => { }}>
            我的出售
          </List.Item>
          <List.Item prefix={<ClockCircleOutline />} onClick={() => { }}>
            看房记录
          </List.Item>
          <List.Item prefix={<BankcardOutline />} onClick={() => { }}>
            成为房主
          </List.Item>
          <List.Item prefix={<UserContactOutline />} onClick={() => { }}>
            个人资料
          </List.Item>
          <List.Item prefix={<PhonebookOutline />} onClick={() => { }}>
            联系我们
          </List.Item>
        </List>
      </div>
    </div>
  )
}
